<template>
  <el-dialog :close-on-click-modal="false" :title="title" :visible="showDialog" @close="close">
    <el-form ref="form" :model="permissionForm" :rules="permissionRules">
      <el-form-item label="权限名称" label-width="100px" prop="name">
        <el-input v-model="permissionForm.name" style="width: 90%;" />
      </el-form-item>
      <el-form-item label="权限标识" label-width="100px" prop="code">
        <el-input v-model="permissionForm.code" style="width: 90%;" />
      </el-form-item>
      <el-form-item label="权限描述" label-width="100px" prop="description">
        <el-input v-model="permissionForm.description" style="width: 90%;" />
      </el-form-item>
      <el-form-item label="开启" label-width="100px">
        <!--开启为1，关闭为0-->
        <el-switch v-model="permissionForm.enVisible" active-value="1" inactive-value="0" />
      </el-form-item>
      <el-form-item style="display: flex; justify-content: center; align-items: center">
        <el-button size="small" @click="close">取消</el-button>
        <el-button size="small" type="primary" @click="confirmHandler">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { getPermissionDetailById, getPermissionList, postPermission, updatePermissionById } from '@/api/permission'

export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    showDialog: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: null
    },
    row: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      permissionForm: {
        pid: null, // 权限点父级id，页面权限点pid值为0，按钮权限点值为所属页面权限点的id的值
        type: null, // 权限点类型，1：为页面路由权限点，2：为按钮权限点
        name: '', // 权限点名字，校验：权限点‘名字’不能和子集们现有的权限点名字重复
        code: '', // 权限点标识，校验：权限标识不能和所有人重复，应该是唯一的标识
        description: '', // 权限点描述
        enVisible: '' //  权限点开启状态，0标识关闭，1表示开启，前端逻辑上默认全都有效
      },
      permissionRules: {
        // 校验：权限点‘名字’不能和子集们现有的权限点名字重复
        name: [
          { required: true, message: '权限名称不能为空', trigger: 'blur' },
          {
            trigger: 'blur',
            validator: async (rule, value, callback) => {
              const result = await getPermissionList()
              result.forEach(item => {
                if (value === item.name) {
                  callback(new Error('权限名称重复，请重新输入'))
                } else {
                  callback()
                }
              })
            }
          }
        ],
        // 校验：权限标识不能和所有人重复，应该是唯一的标识
        code: [
          { required: true, message: '权限标识不能为空', trigger: 'blur' },
          {
            trigger: 'blur',
            validator: async (rule, value, callback) => {
              const result = await getPermissionList()
              result.forEach(item => {
                if (value === item.code) {
                  callback(new Error('权限标识重复，请重新输入'))
                } else {
                  callback()
                }
              })
            }
          }
        ]
      }
    }
  },
  methods: {
    // 关闭对话框
    close() {
      this.permissionForm = {}
      this.$emit('update:showDialog', false)
    },
    // 确定按钮事件
    confirmHandler() {
      this.$refs.form.validate(async success => {
        if (success) {
          // 判断点击确定按钮是添加页面级权限还是按钮级权限还是编辑
          if (this.title === '新增权限点') {
            // 新增权限点 - pid的值为0表示为页面权限，为1表示按钮权限点 type的值为1表示页面路由权限点，为2表示按钮权限点
            await postPermission({ ...this.permissionForm, pid: 0, type: 1 })
          } else if (this.title === '新增子权限点') {
            // 新增子权限点
            await postPermission({ ...this.permissionForm, pid: this.row.id, type: 2 })
          } else {
            // 编辑
            await updatePermissionById(this.permissionForm)
            console.log(this.permissionForm)
          }
          // 提示信息
          this.$message.success(`${this.title === '新增权限点' || this.title === '新增子权限点' ? '添加权限点成功' : '更新权限点成功'}`)
          // 通知父组件重新渲染页面
          this.$emit('updatePermission')
          // 关闭弹框
          this.close()
        }
      })
    },
    getPermissionDetail() {
      // $nextTick()方法在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即执行这个方法，获取更新后的 DOM。
      this.$nextTick(async () => {
        // 根据权限点id获取权限点详情
        this.permissionForm = await getPermissionDetailById(this.id)
      })
    }
  }
}

</script>

<style lang="scss" scoped>

</style>
